<template>
  <div class="dashboard-container">
    <el-card>
      <p>题目预览</p>
      <div class="all" >
        <el-row  >
          <el-row>
            <el-col :span = 6 >
              <span>【题库】：面试宝典题库</span>
            </el-col>
            <el-col :span = 6>
              <span>&nbsp;</span>
            </el-col>
            <el-col :span = 6>
              <span>【学科】：{{details_of_the_test_questions.subjectID}}</span>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span = 6 >
              <span>【题型】：{{details_of_the_test_questions.questionType}}</span>
            </el-col>
            <el-col :span = 6>
              <span>【编号】：{{details_of_the_test_questions.id}}</span>
            </el-col>
            <el-col :span = 6>
              <span>【难度】：{{details_of_the_test_questions.difficulty}}</span>
            </el-col>
            <el-col :span = 6>
              <template>
                  <span>【标签】：{{details_of_the_test_questions.options[0].title}}</span>
              </template>

            </el-col>
          </el-row>

          <el-row class="bdbm" >
            <el-col :span = 6 >
              <span>【目录】：{{details_of_the_test_questions.catalogID}}</span>
            </el-col>
            <el-col :span = 6>
              <span>【企业】：{{details_of_the_test_questions.enterpriseID}}</span>
            </el-col>
            <el-col :span = 6>
              <span>【方向】：{{details_of_the_test_questions.direction}}</span>
            </el-col>
            <el-col :span = 6>
              <span>【城市】：{{details_of_the_test_questions.city}}</span>
            </el-col>
          </el-row>
        </el-row>
        <!-- 题干 -->
        <el-row >
          <p>【题干】：</p>
          <div style="font-weight: normal; text-indent: 2em" >
            {{details_of_the_test_questions.question}}
          </div>
        </el-row>
        <!-- 参考答案 -->
        <el-row>
          <template>
            <span>【参考答案】：</span>
            <el-botton>视频答案预览</el-botton>
          </template>
        </el-row>
        <!-- 答案解析 -->
        <el-row>
          <span>【答案解析】：{{details_of_the_test_questions.answerID}}</span>
        </el-row>
        <!-- 评分标准 -->
        <el-row>
          <span>【评分标准】：有个屁的评分标准</span>
        </el-row>
        <!-- 题目备注 -->
        <el-row>
          <span>【题目备注】：{{details_of_the_test_questions.remarks}}</span>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { mapActions,mapState } from 'vuex'
export default {
  name: 'QuestionsPreview',
  created(){
    this.getPreview()
  },
  data() {
    return {

    }
  },
  methods: {
    ...mapActions(['testQuestions']),
    async getPreview(){
      await this.testQuestions({
        id: 1,
        detail
      })
      console.log(this.details_of_the_test_questions);
    }
  },
  computed: {
    ...mapState({
      details_of_the_test_questions: state=>{
        return state.hmmm_store.getDetail
      }
    })
  }
}
</script>

<style scoped>
.all {
  border: 1px solid #ebebeb;
  padding: 15px 20px;
}
.el-row {
  padding-bottom: 20px;
  color: #666666;
  font-weight: bold;
}
.bdbm {

  border-bottom: 1px solid #ebebeb;
}
</style>
